<script setup lang="ts">
import { ref, onMounted } from "vue";

import { GLTFLoader } from "bmap-three/examples/jsm/loaders/GLTFLoader";
import * as mapvthree from "mapv-three";
import * as THREE from "bmap-three";
import { Engine, FlyManager, UltraDynamicSky, Default3DTiles } from "mapv-three";

const center = [113.014666, 28.118481];
// 初始化百度地图（需要引入地图jsapi）
console.log(BMapGL);
const dom = ref();
const modelInfo = [
  {
    position: [116.39151, 39.89329, 0],
    heading: 10,
    pitch: 90,
  },
  {
    position: [116.39151, 39.89329, 0],
    heading: 180,
    pitch: 80,
  },
];
const mixerArr = ref([]);
onMounted(() => {
  const map = new BMapGL.Map(dom.value);

  map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 17);
  map.enableScrollWheelZoom();
  //map.setMapStyleV2({ styleId: "c95c1f9ab40e5ba30b3b0be8fc3464d8" });

  // 初始化 mapvthree 引擎(第一个参数为地图实例或DOM)

  engine.map.setCenter(center);
  engine.map.setPitch(60);

  // 添加天空(提供光照)
  const sky = engine.add(new FlyManager());
  sky.time = 3600 * 14;

  // 添加其他
  const pillar = engine.add(
    new mapvthree.Pillar({
      height: 300,
      radius: 50,
      radialSegments: 32,
    })
  );

  // const flyManager = engine.add(new FlyManager());
  // const gltfLoader = new GLTFLoader();
  const arr = [
    "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb",
    "/bpi/hours/Parrot.glb",
    "/bpi/JP/Soldier.glb",
    "/bpi/hours/xx_1.FBX",
    "https://caogen-avatar.oss-cn-hangzhou.aliyuncs.com/gltf/gltf_avatar/000000000001b2d6",
    "http://bj.bcebos.com/v1/mapopen/api-demos/model/building4.glb",
    "http://bj.bcebos.com/v1/mapopen/api-demos/model/building5.glb",
  ];

  // gltfLoader.load(arr[1], async function (gltf) {
  //   const model = gltf.scene.children[0];
  //   for (let i = 0; i < modelInfo.length; i++) {
  //     const { position, heading, pitch } = modelInfo[i];
  //     const instance = model.clone();
  //     const ps = [...center, 0]; //[116.39151, 39.89329, 0];
  //     const pos = engine.map.projectPointArr(ps);

  //     var dws = [12956784.604680456, 4822785.895860301, 0];
  //     var sfg = [12956784.604680456, 4822785.895860301, 0];
  //     console.log(position);
  //     console.log(pos);
  //     instance.rotation.x = Math.PI * 0.5;

  //     instance.position.set(...pos);

  //     engine.add(instance);

  //     engine.event.markEventProxy(instance);
  //     engine.event.bind(instance, "click", (e) => {
  //       flyManager.flyTo(
  //         {
  //           zoom: 20,
  //           center: position,
  //           pitch,
  //           heading,
  //         },
  //         {
  //           duration: 1000,
  //         }
  //       );
  //     });
  //   }
  // });
});
</script>

<template>
  <div ref="dom" id="container"></div>
</template>

<style lang="scss">
#container {
  width: 100%;
  height: 700px;
}
</style>
